<template>
  <el-dialog
    class="dialog-style"
    :visible.sync="dialogVisible"
    :fullscreen="true"
    :show-close="false">
    <div slot="title" class="title">
      <el-button class="back" type="text" @click="dialogVisible=false;">返回</el-button>
      <span>绩效详情</span>
    </div>
    <div class="content">
      <div class="info">
        <div class="info-item">{{curUser.dingName}}</div>
        <div class="info-item" v-if="curUser.department">【{{curUser.department}}】</div>
        <div class="info-item">
          <el-popover
            placement="top-start"
            trigger="hover">
            <span>绩效工资*绩效系数=实际发放绩效工资</span>
            <el-table :data="kpiRatioArr" style="font-size:12px">
              <el-table-column width="70" property="name" label="绩效等级" align="center"></el-table-column>
              <el-table-column width="85" label="绩效分数" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.scoresBegin}}分-{{scope.row.scoresEnd}}分</span>
                </template>
              </el-table-column>
              <el-table-column width="70" property="ratio" label="绩效系数" align="center"></el-table-column>
            </el-table>
            <el-button slot="reference" type="text">绩效等级说明<i class="el-icon-question"></i></el-button>
          </el-popover>
        </div>
      </div>
      <el-table :height="tableHeight+'px'" :span-method="objectSpanMethod" :data="tableData" border style="width: 100%" :summary-method="getSummaries" show-summary>
        <el-table-column label="序号" prop="kpiItemPid" width="100" align="center"></el-table-column>
        <el-table-column label="考核类型" prop="kpiItemType" min-width="110" align="center"></el-table-column>
        <el-table-column label="考核内容" prop="kpiItemName" min-width="180" align="left" header-align="center"></el-table-column>
        <el-table-column label="考核关键点" prop="kpiItemKey" min-width="180" align="left" header-align="center">
          <template slot-scope="scope">
            <div style="white-space: pre-line;">{{scope.row.kpiItemKey}}</div>
          </template>
        </el-table-column>
        <el-table-column label="考核参考指标" prop="kpiItemIndex" min-width="180" align="left" header-align="center">
          <template slot-scope="scope">
            <div style="white-space: pre-line;">{{scope.row.kpiItemIndex}}</div>
          </template>
        </el-table-column>
        <el-table-column label="分值倍数" prop="scoresPower" width="120" align="center"></el-table-column>
        <el-table-column v-if="paperUserInfo.status === 3" label="绩效分值" prop="scores" width="120" align="center"></el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import {dateUtil} from '@/utils/dateUtil'
export default {
  data () {
    return {
      dialogVisible: false,
      month: '',
      tableData: [],
      OrderIndexArr: [],
      OrderIndexLenth: [],
      kpiItemPidArr: ['1','2','3','4'],
      paperUserInfo: {},
      kpiRatioArr: [],
      tableHeight: '',
      curUser: {
        dingName: '',
        department: '',
      },
    }
  },
  mounted(){
    this.tableHeight = document.documentElement['clientHeight'] - 120
    window.onresize = () => {
      this.tableHeight = document.documentElement['clientHeight'] - 120
    }
    this.getKpiRatio();
    this.month = dateUtil.thisMonth();
  },
  methods: {
    init(id, dingName, department) {
      this.curUser = {
        dingName: dingName,
        department: department
      }
      this.getMyKpi(id);
      this.dialogVisible = true;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let index = this.OrderIndexArr.indexOf(rowIndex);
      if (columnIndex === 0 || columnIndex === 1) {
        return {
            rowspan: index < 0? 0: this.OrderIndexLenth[index],
            colspan: index < 0? 0: 1
        }
      }
    },
    async getKpiRatio() {
      this.kpiRatioArr = await this.$httpN.get('/kpi/kpiconfig/list');
    },
    computedColLine() {
      this.OrderIndexLenth = [];
      this.OrderIndexArr = [0];
      this.kpiItemPidArr.forEach((item) => {
        let count = 0;
        this.tableData.forEach((data) => {
          if(data.kpiItemPid === item) count++
        })
        if(count !== 0) {
          this.OrderIndexLenth.push(count)
          this.OrderIndexArr.push(this.OrderIndexArr[this.OrderIndexArr.length -1] + count)
        }
      })
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          return sums[index] = '绩效等级';
        }else if(index === 1) {
          return sums[index] = this.paperUserInfo.kpiLevel;
        }else if(index === 2) {
          return sums[index] = '绩效系数';
        }else if(index === 3){
          return sums[index] = this.paperUserInfo.kpiRatio;
        }else if(index === 5){
          return sums[index] = '总分';
        }else if(index === 6) {
          return sums[index] = this.paperUserInfo.kpiScores;
        }else {
          sums[index] = '';
        }
      });
      return sums;
    },
    async getMyKpi(id) {
      let data = await this.$httpN.postQ('hr/kpi/withDetailById', { paperId: id })
      if(data) {
        this.tableData = data.items;
        this.paperUserInfo = data.paper;
        this.computedColLine();
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-style {
  /deep/ .el-dialog__header, /deep/ .el-dialog__body {
    padding: 0;
  }
  .title {
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #DCDFE6;
    position: relative;
    .back {
      position: absolute;
      left: 20px;
      top: 7px;
      cursor: pointer;
    }
  }
  .content {
    padding: 0 20px;
    .info {
      display: flex;
      line-height: 50px;
      .info-item {
        margin-right: 10px;
        display: flex;
        align-items: center;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>